<template>
  <v-page>
   <search-input/>
    <view class="list bg-light p-x-md">
      <v-link to="/pages/contact/new-firend" class="item d-flex align-center">
        <view class="h-39 w-39 bg-theme rounded iconfont fn-26 d-flex align-center justify-center color-light">
          &#xe6a8;
        </view>
        <view class="fn-15 m-l-lg p-y-lg border-b flex-fill"> 新朋友 </view>
      </v-link>
      <v-link to="/pages/contact/group" class="item d-flex align-center">
        <view class="h-39 w-39 bg-blue rounded iconfont fn-24 d-flex align-center justify-center color-light">
          &#xe6d7;
        </view>
        <view class="fn-15 m-l-lg p-y-lg border-b flex-fill"> 我的群组 </view>
      </v-link>
      <v-link to="/pages/contact/label" class="item d-flex align-center">
        <view class="h-39 w-39 bg-yellow rounded iconfont fn-24 d-flex align-center justify-center color-light">
          &#xe603;
        </view>
        <view class="fn-15 m-l-lg p-y-lg border-b flex-fill"> 我的标签 </view>
      </v-link>
    </view>
    <u-index-list :scrollTop="scrollTop" class="bg-light flex-fill">
      <view v-for="(item, index) in indexList" :key="index">
        <u-index-anchor :index="item" />
        <view class="list bg-light p-x-md">
          <view class="item d-flex align-center" v-for="item in 10" :key="item">
            <user-head class="h-39 w-39"></user-head>
            <view class="fn-15 m-l-lg p-y-lg border-b flex-fill"> 赵铁柱 </view>
          </view>
        </view>
      </view>
    </u-index-list>
  </v-page>
</template>

<script>
import uIndexList from "uview-ui/components/u-index-list/u-index-list.vue";
import uIndexAnchor from "uview-ui/components/u-index-anchor/u-index-anchor.vue";
export default {
  data() {
    return {
      scrollTop: 0,
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  components: {
    uIndexList,
    uIndexAnchor,
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-index-bar__sidebar {
  margin-top: 10px;
}
</style>
